<template>
  <div class="boardlist-container">
    <div style="
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      ">
      <div style="display: flex; align-items: center">
        <!-- <el-button type="primary" icon="el-icon-document-add" size="small" @click="addPart">添加零件</el-button> -->
        <el-tag style="margin-left: 10px">仓库种类：{{ filters.material.length }}</el-tag>
        <el-tag style="margin: 0 10px">库存数量：{{ warehouse.length }}</el-tag>
        <el-button type="warning" size="small" @click="reset">列表重置</el-button>
        <!-- <el-button type="primary" size="small" @click="stockLayout">排样</el-button>
        <el-button type="primary" size="small" @click="createBus">飞排</el-button>
        <el-button type="primary" size="small" @click="createBus">飞传</el-button> -->
      </div>
      <div style="display: flex; align-items: center">
        
        <!-- <el-button type="danger" icon="el-icon-document-add" size="small">删除</el-button>
        <el-button type="primary" icon="el-icon-document-add" size="small">导出</el-button> -->
      </div>
      <div style="width:10px;height:10px;"></div>
    </div>
    <el-table :data="tableData" ref="warehouseTable" style="width: 100%" height="80vh" border
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column align="center">
        <template slot="header">
          <header-filter title="板材名称" :current-sort="currentSort" props="name" :filter-change="filterChange"
            :filters="filters.name" />
        </template>
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="类型" width="160" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.processType == 1">板材</span>
          <span v-if="scope.row.processType == 2">型材</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="160">
        <template slot="header">
          <header-filter title="材质" :current-sort="currentSort" props="material" :filter-change="filterChange"
            :filters="filters.material" />
        </template>
        <template slot-scope="scope">{{ scope.row.material }}</template>
      </el-table-column>
      <el-table-column label="缩略图" align="center" width="160">
        <template slot-scope="scope">
          <el-image style="width: 60px; height: 60px;" :src="getAssteImage(scope.row.previewUrl)" fit="contain"
            :preview-src-list="[getAssteImage(scope.row.previewUrl)]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" width="160">
        <template slot="header">
          <header-filter title="长-Y(mm)" sortable props="length" :current-sort="currentSort"
            :filter-change="filterChange" :filters="filters.lengths" />
        </template>
        <template slot-scope="scope">{{ scope.row.length }}</template>
      </el-table-column>
      <el-table-column align="center" width="160">
        <template slot="header">
          <header-filter title="宽-X(mm)" sortable :current-sort="currentSort" props="width"
            :filter-change="filterChange" :filters="filters.width" />
        </template>
        <template slot-scope="scope">{{ scope.row.width }}</template>
      </el-table-column>
      <el-table-column width="160" align="center">
        <template slot="header">
          <header-filter title="厚度(mm)" :filters="filters.thick" sortable :current-sort="currentSort" props="thick"
            :filter-change="filterChange" />
        </template>
        <template slot-scope="scope">{{ scope.row.thick }}</template>
      </el-table-column>
      <el-table-column  align="center" width="160">
        <template slot="header">
          <header-filter title="数量" sortable :current-sort="currentSort" props="actualInv"
            :filter-change="filterChange" />
        </template>
        <template slot-scope="scope">{{ scope.row.actualInv }}</template>
      </el-table-column>
      <el-table-column width="160" align="center">
        <template slot="header">
          <header-filter title="剩余数量" sortable :current-sort="currentSort" props="syInv"
            :filter-change="filterChange" />
        </template>
        <template slot-scope="scope">{{ scope.row.syInv }}</template>
      </el-table-column>
      <el-table-column align="center" width="160">
        <template slot="header">
          <header-filter title="仓库" :current-sort="currentSort" props="warename" :filter-change="filterChange"
            :filters="filters.warename" />
        </template>
        <template slot-scope="scope">{{ scope.row.ware ? scope.row.ware.name : '' }}</template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination layout="sizes,total, prev, pager, next, jumper" :current-page="query.page"
        :page-size="query.pageSize" :page-sizes="[10, 50, 100, 150, 200]" @size-change="handleSizeChange" :total="total"
        @current-change="handlePageChange"></el-pagination>
    </div>
  </div>

</template>

<script>
import { uniq, findIndex, clone, uniqBy, isNumber,orderBy} from 'lodash';
import HeaderFilter from '@/components/headerFilter/HeaderFilter.vue';
import { mapState } from 'vuex';
import globalJs from '@/utils/global';
export default {
  name: 'Boardlist',
  components: { HeaderFilter },
  data() {
    return {
      tableData: [],
      activeName: '0',
      warehouse: [],
      multipleSelection: [],
      tabList: [],
      currentSort: '',
      tableData: [],
      activeName: '0',
      warehouse: [],
      multipleSelection: [],
      tabList: [],
      filters: {
        material: [],
        lengths: [],
        width: [],
        name: [],
        warename: [],
        thick: []
      },
      filterVals: {
        material: [],
        length: [],
        width: [],
        name: [],
        warename: [],
        thick: []
      },
      query: {
        page: 1,
        pageSize: 50
      },
      total: 0
    };
  },
  filters: {
    formDate: (val) => {
      return global.getdate1(val);
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.app.userInfo,
      processType: state => state.app.processType
    }),
  },
  watch: {
    processType:{
      deep:true,
      handler:function(val,old){
        if(val!=old){
          this.initAjaxWarehouse();
        }
      }
    }
  },
  mounted() {
    this.initAjaxWarehouse();
  },
  methods: {
    //仓库
    initAjaxWarehouse() {
      this.loading = true;
      this.$http
        .get(this.$API.GET_USER_WARE, { userId: this.userInfo.id })
        .then((res) => {
          this.loading = false;
          let list = Array.isArray(res.data) ? res.data : [];
          if (list.length > 0) {
            this.warehouseStockAjaxMethod(list);
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    //库存
    warehouseStockAjaxMethod(keys) {
      const loading = this.$loading({ text: '加载中...' });
      this.$http
        .get(this.$API.GET_USER_STOCK + '?' + keys.map(o => 'warehouseIds=' + o.id).join('&'))
        .then(res => {
          loading.close();
          let warehouse = Array.isArray(res.data) ? res.data : [];
          this.warehouse = warehouse;
          this.initAjaxMethod();
        })
        .catch(err => {
          loading.close();
        });
    },
    initAjaxMethod() {
      this.reset();
      let material = [], length = [], width = [], name = [], warename = [], thick = [];
      this.warehouse.forEach(item => {
        item.syInv = (isNumber(Number(item.actualInv)) ? item.actualInv : 0) - (isNumber(Number(item.lockInv)) ? item.lockInv : 0) - (isNumber(Number(item.useInv)) ? item.useInv : 0);
        if (item.ware) {
          warename.push(item.ware.name);
        }
        item.numVal = item.syInv;
        name.push(item.name);
        material.push(item.material);
        length.push(item.length);
        width.push(item.width);
        thick.push(item.thick);
      });
      this.filters.material = uniq(material).map(o => { return { text: o, value: o }; });
      this.filters.lengths = uniq(length).map(o => { return { text: o, value: o }; });
      this.filters.width = uniq(width).map(o => { return { text: o, value: o }; });
      this.filters.name = uniq(name).map(o => { return { text: o, value: o }; });
      this.filters.warename = uniq(warename).map(o => { return { text: o, value: o }; });
      this.filters.thick = uniq(thick).map(o => { return { text: o, value: o }; }); x;
      this.filterHandler();
    },
    filterChange(code, type, value) {       
      if (type === 'checkBox') {
        if (code === 'material') {
          this.filterVals.material = value;
        } else if (code === 'name') {
          this.filterVals.name = value;
        } else if (code === 'length') {
          this.filterVals.length = value; 
        } else if (code === 'width') {
          this.filterVals.width = value;
        } else if (code === 'warename') {
          this.filterVals.warename = value;
        }else if (code === 'thick') {
          this.filterVals.thick = value;
        }
        // console.log('this.filterVals',this.filterVals); 
        this.filterHandler();
      } else if (type === 'sort') { 
        this.currentSort=code;
        let sourceData=[];
        if (code === 'length'){  
          sourceData=orderBy(clone(this.sourceData), 'length', value);
        }else if(code === 'width'){
          sourceData=orderBy(clone(this.sourceData), 'width', value);
        }else if(code === 'syInv'){
          sourceData=orderBy(clone(this.sourceData), 'syInv', value);
        }else if(code === 'thick'){
          sourceData=orderBy(clone(this.sourceData), 'thick', value);
        }else if(code === 'actualInv'){
          sourceData=orderBy(clone(this.sourceData), 'actualInv', value);
        }
        this.sourceData=sourceData;
        this.limitMethod();
      }
    },
    filterHandler() {
      let materials = [], lengths = [], widths = [], names = [], warenames = [], thicks = [],
        { material, length, width, name, warename, thick } = this.filterVals,
        orignData = this.warehouse;
      if (material.length > 0) {
        orignData.forEach(item => {
          let materialsIndex = findIndex(material, o => o == item.material);
          if (materialsIndex > -1) {
            materials.push(item);
          }
        });
      } else {
        materials = orignData;
      }

      if (length.length > 0) {
        materials.forEach(item => {
          let lengthsIndex = findIndex(length, o => o == item.length);
          if (lengthsIndex > -1) {
            lengths.push(item);
          }
        });
      } else {
        lengths = materials;
      }

      if (width.length > 0) {
        lengths.forEach(item => {
          let widthIndex = findIndex(width, o => o == item.width);
          if (widthIndex > -1) {
            widths.push(item);
          }
        });
      } else {
        widths = lengths;
      }


      if (name.length > 0) {
        widths.forEach(item => {
          let nameIndex = findIndex(name, o => o == item.name);
          if (nameIndex > -1) {
            names.push(item);
          }
        });
      } else {
        names = widths;
      }

      if (warename.length > 0) {
        names.forEach(item => {
          let warenamesIndex = findIndex(warename, o => o == item.ware.name);
          if (warenamesIndex > -1) {
            warenames.push(item);
          }
        });
      } else {
        warenames = names;
      }

      if (thick.length > 0) {
        warenames.forEach(item => {
          let thicksIndex = findIndex(thick, o => o == item.thick);
          if (thicksIndex > -1) {
            thicks.push(item);
          }
        });
      } else {
        thicks = warenames;
      }
      this.sourceData = thicks;
      this.query.page = 1;
      this.limitMethod();
    },
    reset() {
      this.$store.dispatch('app/clearTableHeaderFilter');
      this.sourceData = this.warehouse;
      this.currentSort='';
      this.handlePageChange(1);
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //点击第几页
    handlePageChange(currentPage) {
      this.query.page = currentPage;
      this.limitMethod();
    },
    //点击第几页
    handleSizeChange(currentPage) {
      this.query.pageSize = currentPage;
      this.limitMethod();
    },
    limitMethod() {
      let list = [], { page, pageSize } = this.query;
      for (let i = 0; i < this.sourceData.length; i++) {
        if (i >= ((page - 1) * pageSize) && i < (page * pageSize)) {
          list.push(this.sourceData[i]);
        }
      }
      this.tableData = list;
      this.total = this.sourceData.length;
    },
    getAssteImage(url){
      return url && isString(url)?(globalJs.isAbsolutePath(url)?url:this.$API.ASSERT_SERVER_URL+url):'';
    }
  }
};
</script>
<style lang="less">
.boardlist-container {}
</style>
